#snowUpdateStatus
{
    background-color: var(--bs-gray-200);
    padding: 0.75rem;
    padding-bottom: 0;
    border-radius: 0.25rem;
    overflow: hidden;
}

#snowUpdateStatus h3                                                                                    { font-size: 1.25rem; }

#snowUpdateStatus #alertSection
{
    display: block;
    width: calc(100% + (0.75 * 2rem));
    padding: 0;
    margin: 0;
}

#alertSection i                                                                       { font-size: 32px; font-weight: 400; }

@media (min-width: 768px)
{
    #alertSection .col-2                                                              { display: inline-flex; align-items: center; }
}

#alertSection .row                                                                    { padding: 0.75rem 0.25rem; }

#alertSection #criticalUpdate                                                                           
{ 
    background-color: var(--bs-red); 
    color: #fff;
    border-top: 1px solid #850d0d;
    box-sizing: border-box;
}

#alertSection #parkingUpdate.restricted
{

    background-color: var(--bs-yellow);
    color: #000;
}

#alertSection #parkingUpdate.restricted h3                                            { color: #000; }
#alertSection #criticalUpdate h3                                                      { color: #fff; }

#alertSection #parkingUpdate.allowed
{
    padding: 0.75rem 0;
    background-color: var(--bs-green);
    color: #fff;
}

#alertSection #parkingUpdate h3                                                       { color: #fff; }

#snowUpdateStatus #serviceLevelInfo
{
    background-color: var(--bs-gray-400);
    margin: auto -0.75rem -0.75rem;
    width: calc(100% + (0.75rem * 2));
}

#snowUpdateStatus .serviceLevelInfo
{
    padding: 0.75rem !important;
}

#snowEventIndicators
{
    margin: 0;
    padding: 0;
    text-decoration: none;
    background-color: var(--bs-gray-500);
}

#snowEventIndicators span
{
    display: block;
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 50rem;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}

#snowEventIndicators span i                                                           { font-size: 1.25rem; font-weight: 400; }
#snowEventIndicators span#clearingUnderway                                            { background-color: #0d5cd1; color: #fff; }
#snowEventIndicators span#parkingRestricted                                           { background-color: var(--bs-red); color: #000; }
#snowEventIndicators span#parkingAllowed                                              { background-color: var(--bs-green); color: #fff; } 

@media (min-width: 768px)
{
    #snowEventIndicators                                                              { display: flex; }
    #snowEventIndicators span                                                         { width: 100%; }
    #snowEventIndicators:focus #clearingUnderway                                      { background-color: #0946a1 !important; }
    #snowEventIndicators:focus #parkingRestricted                                     { background-color: #c12409 !important; }
    #snowEventIndicators:focus #parkingAllowed                                        { background-color: #087437 !important; }
    span#clearingUnderway:hover                                                       { background-color: #0946a1 !important; }
    span#parkingRestricted:hover                                                      { background-color: #c12409 !important; }
    span#parkingAllowed:hover                                                         { background-color: #087437 !important; }
}